<template>
    <div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed" v-if="shops.length">
                    <li class="mui-table-view-cell" v-for="(shop,index) in shops" :key="index" @click="$router.push('/shop')">
                        <div class="mui-table">
                            <div class="mui-table-cell mui-col-xs-10">
                                <img :src="shop.image_url" alt="">
                                <h4 class="mui-ellipsis">信息化推进办公室张彦合同付款信息化</h4>
                                <h5>申请人：李四</h5>
                                <Star :score="shop.rating"></Star>
                                <span>{{shop.rating}}</span>
                                <p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿，</p>
                            </div>
                            <div class="mui-table-cell mui-col-xs-2 mui-text-right">
                                <span class="mui-h5">12:25</span>
                                <br>
                                <br>
                                <span>订单</span>
                            </div>
                        </div>
                    </li>

                </ul>
                <ul v-else>
                    <li v-for="item in 6">
                        <img src="../../images/svg.jpg" alt="gold">
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import Star from '../../components/Star/Star.vue'
    export default {
        name: "ShopList",
        computed: {
            ...mapState(['shops'])
        },
        components:{
            Star
        }
    }
</script>

<style scoped lang="scss">
  .mui-table-cell{
      width: 30px;
      height: auto;
      img{width: 100%}
  }
</style>